<div class="container_wrapper customer_resetpassword_default" id="customer_resetpassword">
    <div class="mo-card-content" style="margin-bottom:80px">
        <div class="mo-header mo-header-account">
            <h1 class="header-title">
                <span>
                    {%- if customer -%}
                        {{ lang.account.title.reset_password }}
                    {% else %}
                        {{lang.account.title.reset}}
                    {%- endif -%}
                </span>
                
            </h1>
            <div class="header-divider"></div>
        </div>
        <form class="mo-form" id="resetpassword-form">
          <div class="plugin-container-header"></div>

            <div class="mo-form-item {% if customer %}mo-all-disable{% endif %}"  name='email'>
                <div class="mo-form-item-value pub-mo-form-item-value">
                    <input id="email" class="mo-form-input" autocomplete="new-password" name='email' placeholder="{{lang.account.form.email}}" type="text" 
                        {% if customer %}
                        value='{{customer.email}}'
                        disabled
                        {% endif %} 
                    />
                    <label for="email" class="field_label">{{ lang.account.form.email }}</label>
                </div>
            </div>
            {%- unless customer -%}
            <div class="mo-form-item" name='code'>
                <div class="mo-row">
                    <div class="mo-col-8">
                        <div class="mo-form-item-value pub-mo-form-item-value">
                            <input id="code" class="mo-form-input" autocomplete="new-password" name='code' placeholder="{{lang.account.form.verification_code}}" type="text" />
                            <label for="code" class="field_label">{{ lang.account.form.verification_code }}</label>
                        </div>
                    </div>
                    <div class="mo-col-4" style="padding-left: 20px">
                        <div class="reset-code" id="mailCode">{{lang.account.resetpassword.send}}</div>
                    </div>
                </div>
            </div>
            {%- endunless -%}
            <div class="mo-form-item" name='password'>
                <div class="mo-form-item-value pub-mo-form-item-value">
                    <input id="password" class="mo-form-input" autocomplete="new-password" placeholder="{{lang.account.form.password}}" type="password" />
                    <label for="password" class="field_label">{{ lang.account.form.password }}</label>
                </div>
            </div>
            <div class="mo-form-item" name='confirm_password'>
                <div class="mo-form-item-value pub-mo-form-item-value">
                    <input id="confirm_password" class="mo-form-input" autocomplete="new-password" placeholder="{{lang.account.form.confirm_password}}" type="password" />
                    <label for="confirm_password" class="field_label">{{ lang.account.form.confirm_password }}</label>
                </div>
            </div>
            <div class="mo-form-item">
                <div class="mo-form-item-value">
                    <a id='confirm' class="main_btn form_btn">{{lang.account.resetpassword.confirm}}</a>
                </div>
            </div>
            <div class="mo-form-item">
                <span class="text-tip">{{lang.account.resetpassword.return}}<a href="/account/login">{{lang.account.title.log}}</a></span>
            </div>
             <div class="plugin-container-footer"></div>

        </form>
    </div>
</div>


<script type="text/javascript">
(function() {
    let token = moi.getUrlParam('token');
    const rules = {
        email: [{ required: true, message: "{{lang.account.ruls.email}}" },{
            validator:function(value, rules,callback){
                    var emailPat=/^(.+)@(.+)$/;
                    var matchArray=value.match(emailPat);
                    if(!matchArray){
                        return callback("{{lang.account.ruls.email_invalid}}");
                    }
                }
        }],
        {%- unless customer -%}
        code: [{ required: true, message: "{{lang.account.ruls.verification_code}}" }],
        {%- endunless -%}
        password: [{ required: true, message: "{{lang.account.ruls.password}}" },{
            validator:function(value, rules,callback){
                    if(value.length>15 || value.length<6){
                        return callback("{{lang.account.ruls.password_invalid}}");
                    }
                }
        }],
        confirm_password: [{ required: true, message: "{{lang.account.ruls.confirm_password}}" },{
            validator:function(value, rules,callback){

                    const params = moi.paramsValueString(form.allValue());
                    if(value !== params.password){
                        return callback("{{lang.account.ruls.two_password_invalid}}");
                    }
                }
        }],
    };
    const checkoutUrl =  moi.getUrlParam('checkout_url') || "{{checkout_url}}" || '/account/login';
    const form = moi.form("#resetpassword-form", rules);
    $("#confirm").click(function() {
        if (form.allVerify()) {
            const load = moi.nodeShowLoading(this);
            const params = moi.paramsValueString(form.allValue());
            moi.ajax({
                {% if customer %}
                url: '/account/resetpasswordbytoken',
                {% else %}
                url: '/account/resetpassword',
                {% endif %}
                type: 'post',
                data: JSON.stringify({
                    {% if customer %}
                    token,
                    {% endif %}
                    ...params
                }),
                complete: function() {
                    load.close();
                },
                success: function(data) {
                    if (!data.code) {
                        moi.message({ content: '{{ lang.customers.login.reset_successfully }}',onClose(){
                            moi.href(checkoutUrl);
                        }});
                    } else {
                        return moi.alert({ title: data.msg });
                    }
                }
            })
        }
    });

    const mailCode = $("#mailCode");

    let count = 60;

    let oldText = "";


    mailCode.click(function() {

        if (form.verify('email') && count === 60) {
            oldText = mailCode.html()

            const load = moi.nodeShowLoading(this);
            const params = moi.paramsValueString(form.allValue());
            moi.ajax({
                url: '/account/sendemail',
                type: 'post',
                data: JSON.stringify({ email: params.email }),

                complete: function() {
                    load.close();
                },
                success: function(data) {
                   
                    if (!data.code) {
                         mailCode.html(`${--count}s`)
                         mailCode.css({
                             "cursor":"no-drop"
                         })
                        $('.reset-code').addClass('reset-code-prohibit')
                        countdown()
                    } else {
                        return moi.alert({ title: data.msg });
                    }
                }
            })
        }

    });


    function countdown() {

        const timer = setInterval(function() {

            if (count <= 1) {
                mailCode.html(oldText)
                mailCode.css({"cursor":"pointer"})
                $('.reset-code').removeClass('reset-code-prohibit')
                clearInterval(timer)
                count = 60;
                return
            }

            mailCode.html(`${--count}s`)

        }, 1000)

    }
})();
</script>